<template>
	<view class="shop-list-wrap page-bg">
		<view class="shop-shop">
			<image class="shop-shop__icon" :src="shopInfo.shopLogo" mode=""></image>
			<view class="shop-shop__info">
				<text class="shop-shop__title">{{shopInfo.shopName}}</text>
				<text class="shop-shop__desc desc">{{common.stringPartOf(common.htmlToText(shopInfo.shopIntroduce), 18)}}</text>
			</view>
			<view class="shop-shop__view desc link" @click="link('/pages/shop/shopInfo?id='+shopId)">详情</view>
		</view>
		
		<scroll-view v-if="couponList.length > 0" class="coupon-list" scroll-x="true" >
			<view class="coupon-item" v-for="item in couponList" :key='item.id'>
				<view class="coupon-item__info">
					<text class="yuan price">{{item.faceValue | formatMoney}}</text>
					<text class="limit">满{{item.demand}}元可用</text>
					<text class="time">{{item.startTime | formatTime}}~{{item.endTime | formatTime}}</text>
				</view>
				<view class="coupon-item__btn" @click="linqu(item.id)">立即领取</view>
			</view>
		</scroll-view>
		
		<scroll-view v-if='menu.length > 0' class="scroll-menu tt" scroll-x="true">
			<view v-for="(item, index) in menu" :key='item.id' style="padding: 0 20px; width: auto;" :class="currentMenuId===item.id?'menu-item menu-item-active':'menu-item'"
			 @click="serCurrentNavId(item.id, 'menu', index)">
				{{item.typeName}}
				<text class="after-line"></text>
			</view>
		</scroll-view>
		
		<view class="tpl-shop li" v-if="items.length > 0">
			<view class="tpl-shop__item" v-for="item in items" :key='item.id' @click="link('/pages/shop/shopDetail?id='+item.id)">
				<image class="tpl-shop__img" :src="item.imgUrl" mode=""></image>
				<view class="tpl-shop__title">{{item.comTitle}}</view>
				<view class="tpl-shop__price">
					<text class="price yuan">{{item.presentPrice | formatMoney}}</text>
					<text class="origin-price yuan" v-if="item.presentPrice !== item.fixedPrice">{{item.fixedPrice | formatMoney}}</text>
				</view>
			</view>
			
		</view>
		<view class="desc no-info" v-if="items.length > 0">{{text}}</view>
		<view v-if="items.length <= 0" class="desc no-info">暂时没有相关产品~</view>
	</view>
</template>

<script>
	import common from '../../utils/common.js'
	import { api } from '../../utils/api.js'
	export default{
		data() {
			return{
				pageIndex: 1,
				pageSize: 10,
				totalCount: 0,
				items: [],
				
				shopId: '',
				couponList: [],
				menu: [],
				currentMenuId: '', 
				shopInfo: {},
				common,
				text: '上拉加载更多...'
			}
		},
		
		async onLoad(options) {
			this.pageSize = common.pageSize
			this.shopId = options.id
			await this.getMyShopInfo() // 店铺信息
			await this.couponListA() // 店铺优惠券
		    await this.getShopInsideTypeList()
		    await this.getItems()
		},
		
		methods:{
			serCurrentNavId(id) {
				this.currentMenuId = id
				this.items = []
				this.pageIndex = 1
				this.getItems()
			},
			
			getMyShopInfo() {
				api.GetShopById({ id: this.shopId },(res) => {
					 this.shopInfo = res || {}
				}) 
			},
			
			link(url) {
				this.$link(url)
			},
			
			couponListA() {
				api.couponListA({ shopId: this.shopId },(res) => {
					 this.couponList = res || []
				}) 
			},
			
			// 领取优惠券
			linqu(id) {
				api.grabCoupons({ couponId: id },(res) => {
					 this.$showToast('优惠券领取成功~')
				}) 
			},
			
			getItems() {
				let { currentMenuId, shopId, pageIndex, pageSize} = this.$data
				if(this.currentMenuId) {
					api.getSpuListByType({ pageIndex, pageSize, typeId: currentMenuId, shopId: this.shopId },(res) => {
						 this.totalCount = res.totalCount
						 if(this.pageSize > res.totalCount) { this.text = '已经没有更多了~' }
						 this.items = [...this.items, ...res.items]
					}) 
				}
			},
			
			getShopInsideTypeList() {
				api.getShopInsideTypeList({ id: this.shopId },(res) => {
					this.currentMenuId = res[0]['id']
					this.menu = res || []
					this.getItems()
				}) 
			}
		},
		
		onReachBottom() {
			if(this.pageIndex * this.pageSize >= this.totalCount) {
				this.text = '已经没有更多了~'
			}else{
				this.pageIndex ++
				this.getItems()
			}
		}
	}
</script>

<style scoped lang="less">
	@import url('../../app.less');
	.scroll-menu{
		background-color: @f;
		.br;
	}
	.shop-list-wrap{
		padding: 20rpx 30rpx;
		box-sizing: border-box;
	}
	.tpl-shop{
		margin-top: 20upx;
	}
	.shop-shop{
		.shop-shop__icon{
			width: 90rpx;
			height: 90rpx;
		}
		.shop-shop__title{
			.f28;
			.fw;
		}
		.shop-shop__view{
			background-color: none;
			border: none;
			color: @font-dark-color;
		}
	}
	
	.coupon-list{
		white-space: nowrap;
		.coupon-item{
			color: @theme-color;
			.br;
			display: inline-block;
			margin-right: 20rpx;
			background: url('../../static/item_17.png') no-repeat left center;
			background-size: 100% 100%;
			.content-20;
			width: 370rpx;
			height: 160rpx;
			
			padding-right: 0;
		}
		
		.coupon-item__info{
			.f22;
			float: left;
			width: 260rpx;
			.price{
				font-size: 40rpx;
			}
			text{
				display: block;
			}
		}
		.coupon-item__btn{
			.f24;
			.fw;
			writing-mode: lr-bt;
			width: 70rpx;
			writing-mode: tb;
		 float: right;
		 display: flex;
		 flex-direction: column;
		 justify-content: center;
		 align-items: center;
		 height: 100%;
		}
	}
	
	.shop-column{
		margin-top: 15rpx;
		margin-bottom: 20rpx;
		.shop-column__active{
			font-weight: bold;
		}
	}
	
	.shop-list-wrap{
		.tpl-shop, li{
			background-color: @bg-dark-color;
		}
	}
	.tpl-shop{
		padding: 0;
		.flex-base;
		justify-content: space-between;
		flex-wrap: wrap;
		.tpl-shop__item{
			background-color: @f;
			.br;
			width: 335rpx;
			margin-right: 0;
		}
		.tpl-shop__img{
			width: 100%;
			height: 330rpx;
			object-fit: contain;
		}
		.tpl-shop__title{
			.f28;
			line-height: 38rpx;
			max-height: 76rpx;
			overflow: hidden;
			padding: 0 20rpx;
			box-sizing: border-box;
		}
		.tpl-shop__price{
			padding: 0 20rpx;
			box-sizing: border-box;
			padding-bottom: 20rpx;
		}
	}
	
	
</style>
